<template>
    <view :style="{ background: background, paddingTop: statusBarHeight + 'px' }" class="navigation pb-19">
        <view class="f jc-s-b ai-c ph-36 pt-20 h-68">
            <!-- 关闭 -->
            <view v-show="backType === 'close'" class="w-40">
                <u-icon name="close" color="#1A1A1A" size="24" @click="handleBack"></u-icon>
            </view>
            <!-- 返回 -->
            <view v-show="backType == 'back'">
                <image src="../../static/back.png" class="w-40 h-40" @click="handleBack"></image>
            </view>
            <!-- 城市 -->
            <view v-show="backType == 'city'" class="f ai-c" @click="toCity">
                <!-- <image src="../../static/logo.png" class="w-26 h-32"></image> -->
				<u-icon name="map" color="#fff"></u-icon>
                <view class="fs-32 fw-500 text-color5 ml-11 mr-8" style="white-space: nowrap;overflow: hidden;width:400rpx">{{ cityName }}</view>
                <image src="http://cwht.ricecs.cn/app/index/down.png" class="w-17 h-12"></image>

            </view>
            <!-- 标题 -->
            <view class="fs-36 fw-600 text-color1" v-show="title != 'city'" :style="{ color: titleColor }">{{ title }}</view>
            <!-- 标题是城市 -->
            <view v-show="title == 'city'" class="f ai-c" @click="toCity">
                <!-- <image src="../../static/logo.png" class="w-26 h-32"></image> -->
				<u-icon name="map" color="#fff"></u-icon>
                <view class="fs-28 fw-500 text-color5 ml-11 mr-8" style="white-space: nowrap;overflow: hidden;width:400rpx">{{ cityName }}</view>
                <image src="http://cwht.ricecs.cn/app/index/down.png" class="w-17 h-12"></image>

            </view>
            <!-- 分享 -->
            <view class="w-40" v-show="rightType === 'share'">
                <!-- <image src="../../static/logo.png" class="w-33 h-33"></image> -->
            </view>
            <!-- 消息 -->
            <view v-show="rightType == 'news'" class="w-34 h-40 dian" style="margin-right: 196rpx;" @click="toMessage">
				<u-icon name="bell" color="#fff" size="20"></u-icon>
                <!-- <image src="../../static/logo.png" class="w-34 h-40"></image> -->
                <!-- <view class="w-20 h-20 red-dian"></view> -->
            </view>
            <!-- 分享收藏 -->
            <view class="f mp-weixin" v-show="rightType === 'collectShare'">

                <image :src="isCollect ? collectY : collectB" class="w-40 h-40 mr-32"></image>
                <button type="default" open-type="share">
                    <image src="http://cwht.ricecs.cn/app/shop/share-h.png" class="w-40 h-40"></image>
                </button>
            </view>
          <view class="f mp-weixin" v-show="rightType === 'collectShare2'">
            <image :src="isCollect ? collectY : collectH" class="w-40 h-40 mr-32" @click="handleCollect2(storeId)"></image>
            <button type="default" open-type="share">
              <image src="http://cwht.ricecs.cn/app/shop/share-h.png" class="w-40 h-40"></image>
            </button>
          </view>
            <!-- 全部已读 -->
            <view class="fs-28 fw-500 text-color1 mp-weixin" v-show="rightType === 'read'" @click='allRead'>全部已读</view>
            <!-- 右侧占位 -->
            <view class="w-40" v-show="rightType === ''"></view>
        </view>
    </view>
    <!-- 占位 -->
    <view class="w-f pb-19" id="navigationTop" :style="{ paddingTop: statusBarHeight + 'px' }" v-show="isSeat"><view class="w-f h-68"></view></view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { useAuthStore } from '@/store/modules/auth';
import { create } from 'domain';
import { onShareAppMessage } from '@dcloudio/uni-app';
import { messageAllRead } from '@/services/api/mine/index';
import { favoriteExits, favoriteCreate, favoriteDelete } from '@/services/api/shop/collect';
import collectB from '@/static/shop/collect-b.png';
import collectH from '@/static/shop/collect-h.png';
import collectY from '@/static/shop/collect-y.png';
//是否收藏
const isCollect = ref(false);
const emit = defineEmits(['handleBack','shuaxin']);
const authStore = useAuthStore();
const props = defineProps({
    backType: {
        type: String,
        default: 'back', //close  back city
    },
    title: {
        type: String,
        default: '',
    },
    background: {
        type: String,
        default: '',
    },
    rightType: {
        type: String,
        default: '', //share news collectShare
    },
    titleColor: {
        //标题颜色
        type: String,
        default: '',
    },
    isSeat: {
        //是否显示占位
        type: Boolean,
        default: true,
    },
    listenBack: {
        //监听返回按钮
        type: Boolean,
        default: false,
    },
  storeId:{
    type: String,
    default: false,
  }
});
//城市
const cityName = ref(authStore.getCity);
if(props.rightType === 'collectShare2'){
	getFavoriteExits()
}
watch(
    () => [authStore.getCity],
    ([newVaild]) => {
        cityName.value = newVaild as string;
    }
		
);
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
onShareAppMessage((res: any) => {
    if (res.from === 'button') {
        // 判断分享是否来自页面内分享按钮
        console.log(res.target);
    }
    return {
        path: '/pages_shop/business/index',
    };
});
const handleBack = () => {
    if (props.listenBack) {
        emit('handleBack');
        return;
    }
    uni.navigateBack();
};
const toCity = () => {
    uni.navigateTo({
        url: '/pages_index/city',
    });
};
const toMessage = () => {
    uni.navigateTo({
        url: '/pages_mine/myMessage',
    });
		
};

async function allRead() {
    await messageAllRead();
		emit('shuaxin')
}
//检查是否收藏
async function getFavoriteExits() {
	console.log(props.storeId)
    if(props.storeId){
      const { data } = await favoriteExits({ id: props.storeId,collectionType:3 });
      isCollect.value = data;
    }else{
      const { data } = await favoriteExits({ id: props.title,collectionType:2 });
      isCollect.value = data;
    }

}

//收藏/取消商品
async function handleCollect() {
    isCollect.value = !isCollect.value;
    if (isCollect.value) {
        await favoriteCreate({ id: props.title,collectionType:2 });
    } else {
        await favoriteDelete({ id: props.title ,collectionType:2});
    }
}
async function handleCollect2(id:number) {
  isCollect.value = !isCollect.value;
  if (isCollect.value) {
    await favoriteCreate({ id:id,collectionType:3});
  } else {
    await favoriteDelete({ id: id ,collectionType:3});
  }
}
</script>
<style lang="scss" scoped>
::v-deep button {
    padding: 0;
    margin: 0;
    background-color: #fff;
    line-height: 0;
    width: 40rpx;
}
.navigation {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1111;
    .dian {
        position: relative;
    }
    .red-dian {
        background: #f54040;
        border-radius: 50%;
        position: absolute;
        right: -10rpx;
        top: -10rpx;
    }
}
</style>
